<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- 引入标签库 -->
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>员工列表</title>
<!-- 
	web获取项目路径，资源引入都使用绝对路径
	request.getContextPath()获取到的值为：http://localhost:8080/ZHGL(项目名称),没有斜线。
	将此路径设置在pageContext域中的属性，通过EL表达式获取路径的值
	此路径等同于webapp这一层
 -->

<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- 引入jQuery js文件 -->
<script type="text/javascript"
	src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
<!-- 引入Bootstrap样式 -->
<link
	href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<!-- 引入Bootstrap js文件 -->
<script
	src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>

	<div class="container">
		<!-- 标题行 -->
		<div class="row">
			<div class="col-md-12">
				<h1>
					<p class="text-center">中保信综合管理系统-CIITC</p>
				</h1>
			</div>
		</div>
		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-8">
				<button type="button" class="btn btn-primary">新增(add)</button>
				<button type="button" class="btn btn-danger">删除(del)</button>
			</div>
		</div>
		<!-- 数据表格 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-bordered table-hover">
					<tr>
						<td>编号</td>
						<td>姓名</td>
						<td>性别</td>
						<td>邮箱</td>
						<td>部门编号</td>
						<td>操作</td>
					</tr>

					<c:forEach items="${pageInfo.list }" var="emp">
						<tr>
							<td>${emp.empId }</td>
							<td>${emp.empName }</td>
							<td>${emp.gender=="M"?"男":"女" }</td>
							<td>${emp.email }</td>
							<td>${emp.department.deptName }</td>
							<td>
								<button type="button" class="btn btn-primary btn-sm">
									<span class="glyphicon glyphicon glyphicon-pencil"
										aria-hidden="true"></span> 编辑
								</button>
								<button type="button" class="btn btn-danger btn-sm">
									<span class="glyphicon glyphicon glyphicon-trash"
										aria-hidden="true"></span> 删除(del)
								</button>
							</td>
						</tr>
					</c:forEach>
					<!-- <tr>
						<td>1</td>
						<td>a</td>
						<td>男</td>
						<td>ciitc.com</td>
						<td>1</td>
						<td>
							<button type="button" class="btn btn-primary btn-sm">
								<span class="glyphicon glyphicon glyphicon-pencil"
									aria-hidden="true"></span> 编辑
							</button>
							<button type="button" class="btn btn-danger btn-sm">
								<span class="glyphicon glyphicon glyphicon-trash"
									aria-hidden="true"></span> 删除(del)
							</button>
						</td>
					</tr> -->
				</table>
			</div>
		</div>
		<!-- 分页信息 -->
		<div class="row">
			<!-- 分页文字描述信息 -->
			<div class="col-md-6">当前第 ${pageInfo.pageNum} 页,共
				${pageInfo.pages } 页,共 ${pageInfo.total } 条记录</div>

			<!-- 分页条信息 -->
			<div class="col-md-6">
				<nav aria-label="Page navigation">
					<ul class="pagination">
						<c:if test="${!pageInfo.isFirstPage }">
							<li><a href="${APP_PATH }/emps.do?pn=1">首页</a></li>
						</c:if>

						<c:if test="${pageInfo.hasPreviousPage }">
							<li><a href="${APP_PATH }/emps.do?pn=${pageInfo.pageNum-1 }"
								aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
							</a></li>
						</c:if>

						<c:forEach items="${pageInfo.navigatepageNums }" var="pageNum">
							<c:if test="${pageNum == pageInfo.pageNum }">
								<li class="active"><a href="#">${pageNum }</a></li>
							</c:if>
							<c:if test="${pageNum != pageInfo.pageNum }">
								<li><a href="${APP_PATH }/emps.do?pn=${pageNum }">${pageNum }</a></li>
							</c:if>

						</c:forEach>
						<c:if test="${pageInfo.hasNextPage }">
							<li><a href="${APP_PATH }/emps.do?pn=${pageInfo.pageNum+1 }"
								aria-label="Next"> <span aria-hidden="true">&raquo;</span>
							</a></li>
						</c:if>
						<c:if test="${!pageInfo.isLastPage }">
							<li><a href="${APP_PATH }/emps.do?pn=${pageInfo.pages }">末页</a></li>
						</c:if>

					</ul>
				</nav>
			</div>
		</div>
	</div>

















</body>
</html>